<html>

<head>
    <meta charset="utf-8">
    <title>react组件的: 事件,方法,state</title>
    <link rel="stylesheet" href="css/my.css" type="text/css" />
</head>

<body>
    <div id="container"></div>

    <script src="js/react.min.js"></script>
    <script src="js/react-dom.min.js"></script>
    <script src="js/babel.min.js"></script>
    <script type="text/babel">
            //创建组件==>套2个小组件
            var Box=React.createClass({
                //初始状态: true/false  切换不同的组件
                getInitialState:function(){
                    return {editing:false}
                },
                
                //事件-----方法
                edit:function(){
                     // alert("edit");
                     this.setState({
                         editing:!this.state.editing
                     })
                 },
                delete:function(){
                     //调用父组件属性==存储方法----删除值
                    this.props.deleteCommentBox(this.props.index);
                },
                save:function(){
                    //调用父组件属性==存储方法----更新值
                    var inputValue=this.refs.newText.value;
                    this.props.updateCommentText(inputValue,this.props.index);

                     //切换回  原页面
                     this.setState({
                         editing:!this.state.editing
                     })
                },

                //===========组件2
                renderBean1:function(){
                  return (  <div className="box">
                                 <div className="box1">{this.props.children}</div >
                                 <button onClick={this.edit}>edit</button>
                                 <button onClick={this.delete}>delete</button>
                            </div>
                    );
                },
                //===========组件1
                renderBean2:function(){
                  return (  <div className="box">
                                <div>
                                   <textarea 
                                        ref="newText"
                                        className="input"
                                        defaultValue={this.props.children}></textarea>
                                   <button onClick={this.save}>save</button>
                                </div>
                            </div>
                    );
                },

                //内部组件=组件1+组件2: 
                render:function () {

                    if(this.state.editing){
                        return this.renderBean2();

                    }else{
                        return this.renderBean1();
                    }
                    
                }
            });

//父组件---控制数量按钮
var BigBox=React.createClass({
    //创建数组
    getInitialState:function(){
                    return({
                        arr:[
                        "hello","you are good", "welcome!"
                        ]
                    })
                },

    //更新文本---把传入的值: 更新到数组--->给子组件调用
    updateComment:function(newText,i){
        var arr2=this.state.arr;
        arr2[i]=newText;
        this.setState({arr: arr2});
    },
    deleteBox:function(index){
        var arr2=this.state.arr;
        arr2.splice(index,1);//删除一个
        this.setState({arr: arr2});
    },
    addAll:function(text){
        var arr2=this.state.arr;
        arr2.push(text);//添加
        this.setState({arr: arr2});
    },

    eachComment: function(txt, i){
        return (<Box updateCommentText={this.updateComment} 
                    deleteCommentBox={this.deleteBox}
                    key={i} index={i}>{txt}</Box> )
    },
    render:function(){
        return (
            <div>
                <button onClick={this.addAll.bind(null,"default value")}>添加</button>
                <div className="bigbox">
                     {this.state.arr.map( this.eachComment  )}
                </div>
            </div>
        )
    }
});

            //***********外部调用组件: ********
            ReactDOM.render(
                /*<div>
                     <Box>sdfsf</Box>
                     <Box/>
                </div>*/
                <BigBox/>
                ,
                document.getElementById("container")
            )
           //***********外部调用组件: ********
        </script>
</body>

</html>